<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详细</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/message.js}"></script>
    <script type="text/javascript" th:src="@{/js/qrcode.js}"></script>
    <style>
    </style>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
<div class=" ui seat_step container">
    <ul>
        <li class="down">1.选择影片，场次</li>
        <li class="down">2.选座，填手机号</li>
        <li class="down">3.确认订单，支付</li>
        <li class="current">4.支付成功，影院取票观影</li>
    </ul>
</div>
<div class="ui grid container">
    <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
            <div class="column">
                <a th:href="@{/cinemaDetail/{id}(id=${cinema.id})}"><h3 class="ui black header" th:text="${cinema.name}"></h3></a>
            </div>
            <div class="right aligned column">
                <a th:href="@{/cinemaDetail/{id}(id=${cinema.id})}"><i class="ui angle right icon"></i></a>
            </div>
        </div>
    </div>
    <div class="ui attached segment">
        <div class="ui vertical segment">
            <div class="item">
                <h4 class="ui black header" th:text="${film.name}"></h4>
            </div>
            <div class="item add_margin_top">
                <h4 class="ui red header"><span th:text="${#dates.format(time.date,'yyyy年MM月dd日')}"></span>
                            <span th:text="${#dates.format(time.time,'HH:mm')}"></span>
                </h4>
            </div>
            <div class="item add_margin_top">
                <h4 class="ui grey header">
                  <span th:text="${hall.name}"></span>
                    &nbsp;&nbsp;
                    <span style='margin: 5px;' th:each="item:${items}"  th:text="|${item.seatX}排${item.seatY}座|"></span>
                </h4>
                <input type="hidden" th:value="${items.get(0).barcode}" id="barcode_text">
            </div>
        </div>
    </div>
    <div class="ui attached segment">
        <div id="barcode">

        </div>
    </div>
</div>
</body>
<script>
    setTimeout(function () {
        let text=$('#barcode_text').val();
        let barcode = new QRCode("barcode", {
            text: text,
            width: 200,
            height: 200,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    },200)

</script>
</html>